<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环渲染指令 'v-for'</title>
    <script src="../lib/vue-2.6.12.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
   <div id="app">
       <table>
           <thead>
               <th>索引</th>
               <th>ID</th>
               <th>姓名</th>
           </thead>
           <tbody>
           <!-- 只要用到 v-for 指令,那么一定要绑定一个 :key 属性-->
           <!-- 而且尽量把 id 作为 key 的值-->
           <!-- key 的值类型,是有要求的: 字符串或数字类型-->
           <!--  key 的值不能重复,否则会报错: Duplicate keys detected-->
               <tr v-for="(item,index) in list" :key="item.id">
                   <td>{{ index }}</td>
                   <td>{{ item.id }}</td>
                   <td>{{ item.name }}</td>
               </tr>
           </tbody>
       </table>
   </div>

   <script>
       const vm = new Vue({
           el: '#app',
           data: {
               list:[
                   { id: 1,name: '张三' },
                   { id: 2,name: '李四' },
                   { id: 3,name: '王五' },
               ]
           },
           methods: {

           }
       })
   </script>
</body>
</html>